import React, {
    useState, forwardRef, useMemo, useImperativeHandle,
} from "react";
import { Button, Select, Switch } from 'antd';
import eventBus from "@/utils/eventBus";
import { ToolsType } from '../index';

import "./index.less";
interface Props {
	tools?: ToolsType[];
    formRef?: any;
    actionRef?: any;
    selectKeys?: any[];
}

const Comp = forwardRef((props: Props, ref) => {
    const { tools: propsTools } = props;
    const [tools] = useState(propsTools || []);
    const [fold, setFold] = useState(true);
    const [template, setTemplate]: any = useState(null);
    const [selectKeys, setSelectKeys]: any[] = useState([]);

    const handleMore = () => {
        setFold((pre: any) => {
            const doms = document.querySelectorAll('.search');
            if (pre && doms) {
                [...doms].forEach((item: any) => {
                    item.className = item.className.replace(' fold', '');
                });
            }
            if (!pre && doms) {
                [...doms].forEach((item: any) => {
                    item.className += ' fold';
                });
            }
            eventBus.emit('filterCompResize');
            return !pre;
        });
    };

    const cacheDom = useMemo(() => {
        return tools.map((tool, index) => {
            const {
                text, compProps = {}, options, onClick, onChange,
            } = tool;
            const commonProps = { key: tool.text, style: { ...(tool.style || {}), marginLeft: '8px' } };
            switch (tool.type) {
                case 'button':
                    return (
                        <Button
                            {...commonProps}
                            {...compProps}
                            onClick={() => onClick(selectKeys, index, tool)}
                        >
                            {text}
                        </Button>
                    );
                case 'selectAndButton':
                    return (
                        <div {...commonProps}>
                            <Select
                                style={{ ...compProps.style, width: '120px' }}
                                options={options}
                                onSelect={(...args) => setTemplate(args[1])}
                                placeholder="请选择"
                            />
                            <Button
                                {...compProps}
                                style={{ marginLeft: '4px' }}
                                onClick={() => onClick(template, selectKeys, index, tool)}
                            >
                                {text}
                            </Button>
                        </div>
                    );
                case 'switch':
                    return (
                        <div
                            {...commonProps}
                            style={{
                                ...commonProps.style,
                                height: '32px',
                                display: 'flex',
                                alignItems: 'center',
                            }}
                        >
                            {text}
                            <Switch
                                {...compProps}
                                style={{
                                    ...(commonProps.style || {}),
                                    marginLeft: '4px'
                                }}
                                onChange={(e) => onChange(e, selectKeys, index, tool)}
                            />
                        </div>
                    );
                default:
                    break;
            }
        });
    }, [tools, selectKeys, template]);

    useImperativeHandle(ref, () => ({
        setSelectKeys: (e: any[]) => {
            setSelectKeys(e);
        }
    }));

    return (
        <div className="tools">
            <div className="flex flex1">{cacheDom}</div>
            <Button onClick={handleMore}>{ fold ? '展开' : '收起' }</Button>
        </div>
    );
});

Comp.displayName = 'ToolsComp';

export default Comp;